<template>
  <div>
    <Scroll :on-reach-bottom="handleReachBottom" loading-text="正在加载中" height="500">
    <List >
      <ListItem v-for="item in data2" :key="item.id">
        <ListItemMeta :avatar="item.headImage" :title="item.userName" :description="item.addTime"/>
        <i @click="detail(item.id)" v-html="item.context"></i>
        <template slot="action">
          <li>
            <i v-if="item.collection==false" class="el-icon-star-off" size="mini" @click="collectionL(item)"></i>
            <i v-if="item.collection==true" class="el-icon-star-on" size="mini" @click="collectionL(item)"></i>
            {{item.collectionNum}}
          </li>
          <li>
            <Icon type="md-heart-outline" v-if="item.love==false" @click="love(item)"/>
            <Icon type="md-heart" v-if="item.love==true" @click="love(item)"/>
            {{item.loveNum}}
          </li>
          <li>
            <Icon type="ios-chatbubbles-outline" /> {{item.commentNum}}
          </li>
        </template>
        <template slot="action">
          <li @click="openClosePower(item)">
            <el-switch
              v-model="item.power == 0"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </li>
          <li>
            <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除你的回忆吗？"
              @onConfirm="deleteShare(item)"
            >
              <el-button type="danger" slot="reference">删除</el-button>
            </el-popconfirm>
          </li>
        </template>
      </ListItem>
    </List>
    <div style="text-align: right; position: fixed; right: 0; bottom: 0">
      <el-button icon="el-icon-caret-top" @click="backTop" size="medium" circle></el-button>
    </div>
  </Scroll>
    <DetailLifeShare ref="detailLifeShare"></DetailLifeShare>
  </div>
</template>

<script>
import PersonLifeShare from "@/components/lifesquare/personLifeShare";
import DetailLifeShare from "@/components/lifesquare/detailLifeShare";
import {addCollectionLove, getCollectionLove} from "@/api/liveShare";
import {deleteShare, getAllCollectionSharing, openOrClosePower} from "@/api/myDesign";
import {sendMatomo} from "@/api/matomo";

export default {
  name: "myShare",
  components: {PersonLifeShare, DetailLifeShare},
  data () {
    return {
      data2: [],
      page: 0,
      size: 10
    }
  },
  created() {
    this.getAllLivingShare(0,10)
  },
  methods: {
    async getAllLivingShare(page, size) {
      await getAllCollectionSharing(page, size).then(res => {
        let data = res.body.data
        let length = this.data2.length
        if (size == 1) {
          for (let i=length - 1;i>0;i--) {
            this.$set(this.data2,i+1,this.data2[i])
          }
          this.$set(this.data2,0,data[0])
        } else {
          for (let i = 0; i < data.length; i++) {
            this.$set(this.data2,length+i,data[i])
          }
        }
      })
    },
    openClosePower(item) {
      sendMatomo(8,'我的作品', '修改', '修改分享权限,分享id:'+item.id)
      openOrClosePower(item.id).then(res => {
        if (res.body.data) {
          this.$message.success("权限改变")
          if (item.power == 0)
            item.power = 1
          else
            item.power = 0
        }
      })
    },
    async deleteShare(item) {
      sendMatomo(9,'我的作品', '删除', '删除分享,分享id:'+item.id)
      await deleteShare(item.id).then(res => {
        if (res.body.data)  {
          this.$message.success("删除成功")
          this.data = []
          this.getAllLivingShare(this.page, this.size)
        }
      })
    },
    handleReachBottom() {
      return new Promise(resolve => {
        setTimeout(() => {
          this.page = this.page + 1
          this.getAllLivingShare(this.page, this.size)
        }, 20);
      });
    },
    backTop() {
      this.data2 = []
    },
    async collectionL(item) {
      await addCollectionLove(item.id, 2).then(res => {
        if (res.body.data) {
          item.collection = !item.collection
        }
      })
      this.data2 = []
      this.getAllLivingShare(0,10)
    },
    async love(item) {
      await addCollectionLove(item.id, 1).then(res => {
        item.love = !item.love
      })
      getCollectionLove(item.id, 1).then(res => {
        item.loveNum = res.body.data
      })
    },
    detail(id) {
      this.$refs.detailLifeShare.add(id)
    },
    personLife() {
      this.$refs.personLifeShare.add()
    },
    handleOk() {
      this.page = 0
      this.getAllLivingShare(0, 1)
    }
  }
}
</script>

<style scoped>

</style>
